// import echarts from 'echarts'
import BorderItem from '@/components/borderItem/ui.vue'
import ProgressBall from '@/components/progressBall/ui.vue'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import {
  GaugeOption,
  LineOption,
  PieOption
} from './option';

export default {
  data() {
    return {
      strokeWidth: document.documentElement.clientWidth/115,
      gaugeItems: [{
        id: 1,
        value: 60,
        name: '地区生产总值',
      }, {
        id: 2,
        value: 30,
        name: '固定资产投资',
      }, {
        id: 3,
        value: 80,
        name: '服务贸易额',
      }, {
        id: 4,
        value: 50,
        name: '社会消费品零售总额',
      }, {
        id: 5,
        value: 90,
        name: '外贸进出口总额',
      }, {
        id: 6,
        value: 34,
        name: '实际利用外资',
      }]
    }
  },
  components: {
    BorderItem,
    ProgressBall
  },
  mounted() {
    this.initEchart();
    window.onresize = () => {
      this.initEchart()
    }
  },
  methods: {
    deepCopy(obj) {
      var str, newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== 'object') {
        return;
      } else if (window.JSON) {
        str = JSON.stringify(obj), //系列化对象
          newobj = JSON.parse(str); //还原
      } else {
        for (var i in obj) {
          newobj[i] = typeof obj[i] === 'object' ?
            this.deepCopy(obj[i]) : obj[i];
        }
      }
      return newobj;
    },

    initEchart() {
      let myChart1 = echarts.init(this.$refs.echartDiv1)
      let myChart2 = echarts.init(this.$refs.echartDiv2)
      let myChart3 = echarts.init(this.$refs.echartDiv3)
      let myChart4 = echarts.init(this.$refs.echartDiv4)

      const option1 = this.deepCopy(LineOption);
      option1.series[0].name = '完成目标情况(%)';
      option1.xAxis.data = ['经济发展', '创新驱动', '民生保障', '创新驱动', '创新驱动']
      option1.series[0].data = [820, 934, 1330, 990, 1000]
      option1.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#8D57FF'
          },
          {
            offset: 1,
            color: '#3537B8'
          }
        ]
      )
      myChart1.setOption(option1)

      const option2 = this.deepCopy(LineOption);
      option2.series[0].name = '完成目标情况(%)';
      option2.series[0].barWidth = 50;
      option2.xAxis.data = ['连云区', '灌云区', '灌南区']
      option2.series[0].data = [700, 356, 500]
      option2.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#10C7E7'
          },
          {
            offset: 1,
            color: '#2944BE'
          }
        ]
      )
      myChart2.setOption(option2)

      const option3 = this.deepCopy(LineOption);
      option3.xAxis.data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      option3.xAxis.boundaryGap = false
      option3.series[0].name = '地区生产总值';
      option3.series[0].data = [200, 356, 400, 500, 550, 656, 700, 760, 800, 836, 900, 1000]
      option3.series[0].type = 'line'
      option3.series[0].areaStyle = {}
      option3.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(
        0, 0, 0, 1,
        [{
            offset: 0,
            color: '#43FF78'
          },
          {
            offset: 1,
            color: '#02471E'
          }
        ]
      )
      myChart3.setOption(option3)

      const option4 = this.deepCopy(PieOption);
      myChart4.setOption(option4)

      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()

      this.$refs.gaugeItem.forEach((element, index) => {
        let chart = echarts.init(element)
        let data = this.gaugeItems[index];
        let option = Object.assign(GaugeOption);
        option.series[0].data = [{
          value: data.value,
          name: data.name
        }]
        chart.setOption(option)
        chart.resize()
      });
    }
  }
}